<template>
    <div>
        <img src="@/customization/banner3.png" class="banner"/>
        <div class="title">
            <div class="line"></div>
            案例展示
            <div class="line"></div>
        </div>
        <div class="tabs" >
            <div  class="tab" v-for="(item,index) of tabs" :key="index" v-bind:class="item.select?'active':''" @click="choose(item,index)" >
                {{item.name}}
            </div>
        </div>
        <div class="rotation" >
            <div v-if="tabNum==0">
                <mycarousel1></mycarousel1>
            </div>
            <div v-if="tabNum==1">
                <mycarousel2></mycarousel2>
            </div>
            <div v-if="tabNum==2">
                <mycarousel3></mycarousel3>
            </div>
            <div v-if="tabNum==3">
                <mycarousel4></mycarousel4>
            </div>
            
        </div>
        <div class="title">
            <div class="line"></div>
            我们的服务
            <div class="line"></div>
        </div>
        <div class="server">
            <img src="@/customization/lbanner.png" class="banner"/>
            <div class="text">
                我们为客户提供符合全友绿色产业链标准的优质工程家具系列<br>

                提供方案咨询、方案设计、产品设计开发、高效运营服务为一体的整体<br>

                工程项目解决方案如有需要,请直接联系客服。<br><br>

                
                备注：请将合作需求及相关资料一并随邮件发送相关工作人<br>

                员会及时与您联系。            
            </div>
            <div class="logos">
                <div class="logo">
                    <div class="icon1 icon"></div>
                </div>
                <div class="logo">
                    <div class="icon2 icon"></div>
                </div>
                <div class="logo">
                    <div class="icon3 icon"></div>
                </div>
                <div class="logo">
                    <div class="icon4 icon"></div>
                </div>
            </div>
            <div class="texts">
                <div class="icontext">方案咨询</div>
                <div class="icontext icontext1">方案设计</div>
                <div class="icontext icontext2">产品设计开发</div>
                <div class="icontext">高效运营</div>    
            </div>
        </div>
    </div>
</template>



<script>
import Carousel1 from '../../components/carousel/index1'
import Carousel2 from '../../components/carousel/index2'
import Carousel3 from '../../components/carousel/index3'
import Carousel4 from '../../components/carousel/index4'

export default {
    data(){
        return {
            tabNum:0,
            tabs:[
                {name:"民建案例",select:true},
                {name:"酒店案例",select:false},
                {name:"餐饮案例",select:false},
                {name:"办公案例",select:false}
            ]
        }
    },
    components:{
        "mycarousel1":Carousel1,
        "mycarousel2":Carousel2,
        "mycarousel3":Carousel3,
        "mycarousel4":Carousel4
    },
    methods:{
        choose(item,index){
            for(var i=0;i<this.tabs.length;i++){
                this.tabs[i].select=false;
            }
            item.select=true;
            this.tabNum=index;
        }
    }
}

</script>

<style scoped lang="scss">
    .banner{
        width : 100%;
    }
    .line{
        width:1.52rem;
        height:0rem;
        border:0.007rem solid rgba(180,157,126,1);
        display: inline-block;
        vertical-align: middle;
    }
    .title{
        font-size:0.48rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        text-align: center;
        margin: 1.18rem 0 0.63rem;
        vertical-align: middle;
    }
    .tabs{
        width:51%;
        margin: 0 auto;
        overflow: hidden;
    }
    .active{
        background:rgba(180,157,126,1);
        border-radius:0.22rem; 
    }
    .tab{
        line-height: 0.44rem;
        text-align: center;
        width:1.2rem;
        height:0.44rem;
        font-size:0.24rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        float: left;
        margin: 0 0.6rem;
        cursor: pointer;
    }
    .rotation{
        width:100%;
        height:7.15rem;
        background:linear-gradient(92deg,rgba(242,242,242,1),rgba(232,232,232,1));
        margin-top: 0.78rem;
        padding-top: 0.01rem;
    }
    .rotation mycarousel{
        margin: 0 auto;
    }
    .server{
        margin-bottom: 0.74rem;
        position: relative;
    }
    .text{
        font-size:0.18rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        line-height: 0.42rem;
        position: absolute;
        top: 1.22rem;
        left:3.71rem;
    }
    .logos{
        position: absolute;
        top: 4.65rem;
        left: 3.71rem;
        overflow: hidden;
    }
    .logo{
        width:0.9rem;
        height:0.9rem;
        background:rgba(180,157,126,1);
        border-radius:50%;
        padding-top: 0.15rem;
        float: left;
        margin-right: 1.44rem;
        cursor: pointer;
    }
    .icon{
        height:0.6rem;
        width:0.6rem;
        background-image: url('../../assets/img/icons/sprite3.png');
        background-size: 342%;
        margin: 0 auto;
    }
    .icon1{
        background-position:right bottom;
    }
    .icon2{
        background-position:99% 41%;
    }
    .icon3{
        background-position:85% -2.3%;
        margin-top: 0.05rem;
    }
    .icon4{
        background-position:38% -10%;
    }
    .texts{
        position: absolute;
        top: 5.66rem;
        left:3.75rem;
    }
    .icontext{
        font-size:0.2rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        float: left;
        padding-right: 1.54rem;
        cursor: pointer;
    }
    .icontext1{
        padding-right: 1.4rem
    }
    .icontext2{
        padding-right: 1.3rem
    }

</style>
